<template>
	<view class="uni-container">
		<uni-forms ref="Form" :modelValue="form">
			<uni-forms-item label="用户名" required>
				<uni-easyinput v-model="form.username" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="密码" required>
				<uni-easyinput v-model="form.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required>
				<uni-easyinput v-model="form.telphone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" required>
				<uni-easyinput v-model="form.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<button class="uni-button" @click="handleSubmit" size="middle" type="primary"
				style="margin-right: 10rpx;">提交</button>
			<button class="uni-button" @click="getList" size="middle" type="info">刷新</button>
		</uni-forms>
		<p class="tips">*可以直接在表格中编用户名、手机号、邮箱，并保存</p>
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="150" align="center">ID</uni-th>
				<uni-th width="150" align="center">用户名</uni-th>
				<uni-th align="center">手机号</uni-th>
				<uni-th width="204" align="center">邮箱</uni-th>
				<uni-th width="204" align="center">注册时间</uni-th>
				<uni-th width="204" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in userList" :key="index">
				<uni-td>{{ item.uuid }}</uni-td>
				<uni-td>
					<view class="name">
						<input type="text" v-model="item.username" />
					</view>
				</uni-td>
				<uni-td align="center"><input type="tel" v-model="item.telphone" /></uni-td>
				<uni-td align="center"><input type="email" v-model="item.email" /></uni-td>
				<uni-td align="center">{{ new Date(item.add_date).toLocaleString() }}</uni-td>
				<uni-td>
					<view class="uni-group">
						<button class="uni-button" @click="updateUser(item)" size="mini" type="primary"
							style="margin-right: 10rpx;">修改</button>
						<button class="uni-button" @click="deleteUser(item.uuid)" size="mini" type="warn">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
				:total="total" @change="change" /></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const userList = ref({})
	const loading = ref(false)
	const pageSize = ref(5)
	const pageCurrent = ref(1) // 当前页码
	const total = ref(0) // 总条数
	const form = ref({
		username: '',
		password: '',
		telphone: '',
		email: ''
	})
	const apiUrl = ref(import.meta.env.VITE_API_URL);
	// 获取用户列表
	function getList() {
		loading.value = true
		// 使用uni.request替代fetch
		uni.request({
			url: `${apiUrl.value}/v2/getUserList`,
			success: (res) => {
				loading.value = false
				if (res.statusCode === 200) {
					console.log(res)
					userList.value = res.data.data.sort((a, b) => new Date(b.add_date) - new Date(a.add_date));
				}
			},
			fail: (error) => {
				loading.value = false
				console.error("Error:", error);
			}
		});
	}

	function deleteUser(uuid) {
		fetch(`${apiUrl.value}/v2/addUser/v2/deleteUser?uuid=${uuid}`, {
			method: "GET",
		})
			.then((response) => response.json()) // 解析 JSON 响应
			.then((data) => {
				if (data.code === 200) {
					getList();
					alert(data.msg);
				} else {
					alert(data.msg);
				}
			})
			.catch((error) => {
				console.error("Error:", error);
			});
	}
	const change = (e) => {
		pageCurrent.value = e.current
	}
	function updateUser(item) {
		uni.request({
			url: 'http://127.0.0.1:8888/v2/updateUser',
			method: "post",
			data: {
				uuid: item.uuid,
				username: item.username,
				email: item.email,
				telphone: item.telphone
			},
			success: (res) => {
				if (res.statusCode === 200) {
					getList();
					uni.showToast({
						title:res.data.msg,
						icon: 'none'
					})
				}
			},
			fail: (error) => {
				console.error("Error:", error);
			}
		})
	}

	function handleSubmit() {
		uni.request({
			url: `${apiUrl.value}/v2/addUser`,
			method: "post",
			data: form.value,
			success: (res) => {
				console.log('resss',res)
				if (res.statusCode === 200) {
					getList();
					uni.showToast({
						title:res.data.msg,
						icon: 'none'
					})
				}
			},
			fail: (error) => {
				console.error("Error:", error);
			}
		});
	}

	onMounted(() => {
		getList(); // 组件挂载后获取用户列表
	});
</script>

<style scoped>
	@import "./index.scss";
</style>